<template>
  <view class>
    <view class="indexWrap" :style="{top:(statusBarHeight+navBarHeight)+'px'}">
      <text
        class="item"
        :class="{'active':activeLetter === item}"
        v-for="item of indexList"
        :key="item"
        :id="item"
        @click="clickLetter(item)"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
      >{{item}}</text>
    </view>
    <view class="tip" :style="{'top':touchY+'px'}" v-show="touchStatus">{{activeLetter}}</view>
  </view>
</template>

<script>
import { mixin } from '@/common/mixin/index'
export default {
  mixins: [mixin],
  data () {
    return {
      indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
      touchStatus: false,
      startY: 80,
      touchY: 0,
      activeLetter: 'A'
    }
  },
  methods: {
    clickLetter (letter) {
      this.activeLetter = letter
      this.$emit('letter', letter)
    },
    handleTouchStart () {
      this.touchStatus = true
    },
    handleTouchMove (e) {
      if (this.touchStatus) {
        uni.$u.throttle(this.getLetter(e), 500)
      }
    },
    getLetter (e) {
      const query = uni.createSelectorQuery().in(this)
      query.select('#A').boundingClientRect(data => {
        this.startY = data.top - (this.statusBarHeight + this.navBarHeight)
      }).exec()
      const touchY = e.touches[0].clientY - (this.statusBarHeight + this.navBarHeight)
      this.touchY = e.touches[0].clientY - 20
      const index = Math.floor((touchY - this.startY) / 20)
      this.activeLetter = this.indexList[index]
      this.$emit('letter', this.indexList[index])
    },
    handleTouchEnd () {
      this.touchStatus = false
    }
  }
}
</script>

<style lang="scss" scoped>
.tip {
  width: 60rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border-radius: 50%;
  background-color: $u-type-success-dark;
  color: #fff;
  font-size: 28rpx;
  position: fixed;
  right: 60rpx;
}
.indexWrap {
  width: 40rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  right: 0;
  .item {
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    text-align: center;
    color: $u-success;
  }
  .active {
    border-radius: 50%;
    background-color: $u-type-success-light;
  }
}
</style>
